<template>
  <view class="student-list">
    <view class="table-header">
      <text class="header-cell">ID</text>
      <text class="header-cell">姓名</text>
      <text class="header-cell">年龄</text>
      <text class="header-cell">性别</text>
      <text class="header-cell">年级</text>
      <text class="header-cell">操作</text>
    </view>
    
    <view class="table-row" v-for="student in students" :key="student.id">
      <text class="table-cell">{{ student.id }}</text>
      <text class="table-cell">{{ student.name }}</text>
      <text class="table-cell">{{ student.age }}</text>
      <text class="table-cell">{{ student.gender }}</text>
      <text class="table-cell">{{ student.grade }}</text>
      <view class="table-cell actions">
        <button class="edit-btn" @click="editStudent(student)">编辑</button>
        <button class="delete-btn" @click="deleteStudent(student.id)">删除</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['students'],
  emits: ['edit', 'delete'],
  methods: {
    editStudent(student) {
      this.$emit('edit', student);
    },
    deleteStudent(id) {
      this.$emit('delete', id);
    }
  }
};
</script>

<style scoped>
.student-list {
  width: 100%;
  margin-top: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.table-header, .table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e0e0e0;
}

.table-row:last-child {
  border-bottom: none;
}

.header-cell, .table-cell {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
}

.header-cell {
  font-weight: bold;
  background-color: #f5f5f5;
}

.table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.actions {
  display: flex;
  gap: 8px;
}

button {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
}

.edit-btn {
  background-color: #4a9cff;
  color: white;
}

.delete-btn {
  background-color: #ff6b6b;
  color: white;
}
</style>